<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>设置我的资料</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/layuiAdmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/layuiAdmin/style/admin.css" media="all">
  <script src="/js/include.js"></script>
</head>
<body>

<div id="app">
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-card">
        <div class="layui-card-header">设置我的资料</div>
        <div class="layui-card-body" pad15>
          <el-form :model="editForm" ref="editForm" :rules="rules" label-width="100px">

            <el-form-item label="用户名" prop="loginName">
              <el-input v-model="editForm.loginName" :disabled="true" style="width: 200px"></el-input>
            </el-form-item>

            <el-form-item label="昵称" prop="nickName">
              <el-input v-model="editForm.nickName" style="width: 200px"></el-input>
            </el-form-item>

            <el-form-item label="手机" prop="phone">
              <el-input v-model="editForm.phone" style="width: 200px"></el-input>
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
              <el-input v-model="editForm.email" style="width: 200px"></el-input>
            </el-form-item>

            <el-form-item label="性别" prop="gender">
              <el-radio v-for="item in genders" v-model="editForm.gender" :label="item.value">{{item.label}}</el-radio>
            </el-form-item>

            <el-form-item label="头像" prop="profilePictureUrl">
              <el-upload
                      class="upload-demo"
                      ref="upload"
                      action="/sys/uploadProfilePicture"
                      :on-preview="handlePreview"
                      :on-success="onSuccess"
                      :on-error="onError"
                      :on-change="handleChange"
                      :file-list="fileList"
                      accept="image/jpeg,image/gif,image/png"
                      :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
              <div class="demo-image__preview" v-if="editForm.profilePictureUrl !== undefined && editForm.profilePictureUrl !== null && editForm.profilePictureUrl !== '' ">
                <el-image
                        style="width: 100px; height: 100px"
                        :src="editForm.profilePictureUrl"
                        :preview-src-list="srcList">
                </el-image>
              </div>
            </el-form-item>

            <el-form-item>
              &nbsp;
              <el-button type="primary" @click="submitForm">确认修改</el-button>
            </el-form-item>

          </el-form>
        </div>
      </div>
    </div>
    </div>
  </div>
</div>

  <script src="/layuiAdmin/layui/layui.js"></script>
  <script>
      let genderEnum = MY_ENUM.getElOptions("Gender").sort(COMPARE_DESC("value"));
      let vm = new Vue({
          el: '#app',
          data: {
              genders: genderEnum,
              editForm: {
                  profilePictureUrl: ""
              },
              fileList: [], // 上传控件显示需要的列表
              srcList: [],  // 图片放大需要的列表
              rules: {
                  nickName: [{ required: true, trigger: 'blur', message: '请输入昵称' }],
                  phone: [{ required: true, trigger: 'blur', message: '请输入电话' }],
                  email: [{ required: true, trigger: 'blur', message: '请输入邮箱' }],
                  gender: [{ required: true, trigger: 'blur', message: '请选择性别' }],
              },
          },
          methods: {
              submitForm() {
                  let that = this;
                  this.$refs["editForm"].validate((valid) => {
                      if (!valid) {
                          return false;
                      }

                      myConfirm("确定提交？", function () {
                          showLoading("保存中....");
                          let user = JSON.parse(JSON.stringify(that.editForm));

                          myAjax({
                              type: "post",
                              url: BASE_PATH + "/sys/updateMyInfo",
                              data: user,
                              isJson: true,
                              callback: function () {
                                  hideLoading();
                                  successMessage("提交成功！");
                              }
                          })
                      })

                  });

              },
              submitUpload() {
                  this.$refs.upload.submit();
              },
              handlePreview(file) {
                  // console.log("handlePreview");
                  // console.log(file);
              },
              onSuccess(response, file){
                  if (response.error === 1) {
                      warningMessage(response.message);
                      return;
                  }
                  this.editForm.profilePictureUrl = response.url;
                  this.srcList =  [response.url];
              },
              onError(response, file){
                  warningMessage("服务器繁忙，上传失败。请稍后重试！");
              },
              handleChange(file, fileList) {
                  if (fileList.length > 1) {
                      this.fileList = fileList.slice(1);
                  }
              }
          },
          created: function () {
              let that = this;
              myAjax({
                  type: "get",
                  url: BASE_PATH + "/sys/myInfo",
                  callback: function (data) {
                      that.editForm = data;
                  }
              });
          }
      });
  </script>
  <script>
  layui.config({
    base: '/layuiAdmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  });
  </script>
</body>
</html>